<template>
  <div>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <van-grid column-num="5">
      <van-grid-item icon="/src/img/1.png" text="购物享好价" />
      <van-grid-item icon="/src/img/2.png" text="每周上新" />
      <van-grid-item icon="/src/img/2.png" text="精致生活" />
      <van-grid-item icon="/src/img/2.png" text="美食不等待" />
      <van-grid-item icon="/src/img/2.png" text="舒适睡眠" />
    </van-grid>

    <van-card v-for="item in data" :title="item.title" 
    :level='item.level' 
    :price="item.price" 
    :sizeRoom="item.sizeRoom" 
    :thumb="item.url" 
    :name="item.name" 
    :person="item.person" 
    @click="toget(item)" />


    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">分类</van-tabbar-item>
      <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = new useRouter();
const data = ref([]);

const getdata = async () => {
  const resp = await axios.get("/api/room/list");
  console.log(resp);
  data.value = resp.data.data.list;
};

const toget = (v) => {
  router.push({
    path: "/detail/" + v.id,
    query: v,
  });
  console.log(v);
};
getdata();
</script>

<style lang="scss" scoped>
</style>